<template>
  <div id='login-container'>
    <div id="login-box">
      <div class="back">
        <el-button
          type="text"
          class="back"
          @click="dialogPhoneVisible = true"
        >找回密码</el-button>
        <phoneDialog
          ref="backDialog"
          :dialogPhoneVisible.sync="dialogPhoneVisible"
          @codeEV="codeFn"
        />
        <passwordDialog
          ref=""
          :dialogPwdVisible.sync="dialogPwdVisible"
          :backFrom='backFrom'
        />
      </div>

      <el-form
        :model="loginFrom"
        status-icon
        :rules="loginRules"
        ref="loginFrom"
        label-width="50px"
        class="demo-loginFrom"
      >
        <el-form-item
          label="账号"
          prop="account"
        >
          <el-input
            type="account"
            v-model.trim="loginFrom.account"
            autocomplete="off"
            placeholder="请输入学号 / 工号"
            clearable
            minlength="5"
            maxlength="12"
            show-word-limit
            @keyup.enter.native="handleLogin()"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model.trim="loginFrom.password"
            autocomplete="off"
            placeholder="请输入密码"
            clearable
            minlength="6"
            maxlength="12"
            show-password
            @keyup.enter.native="handleLogin()"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleLogin()"
          >登录</el-button>
        </el-form-item>
      </el-form>

    </div>

  </div>
</template>

<script>
import phoneDialog from './components/phoneDialog.vue'
import passwordDialog from './components/passwordDialog.vue'
export default {
  components: { phoneDialog, passwordDialog },
  name: 'myLogin',
  data () {
    return {
      loginFrom: {
        account: '',
        password: ''
      },
      loginRules: {
        password: [
          { required: true, message: '密码不能为空！', trigger: 'change' },
          {
            min: 6,
            max: 12,
            type: 'string',
            message: '密码要求6-12个字符',
            trigger: 'change'
          }
        ],
        account: [
          { required: true, message: '账号不能为空！', trigger: 'change' },
          {
            min: 5,
            max: 12,
            type: 'string',
            message: '账号要求5-12个字符',
            trigger: 'change'
          }
        ]
      },
      dialogPhoneVisible: false,
      dialogPwdVisible: false,
      backFrom: {
        phone: '',
        type: ''
      }
    }
  },
  methods: {
    // 登录 -> 发送请求
    handleLogin () {
      this.$refs.loginFrom.validate(async (valid) => {
        if (valid) {
          try {
            await this.$store.dispatch('user/loginActions', this.loginFrom)
          } catch (err) {
            return console.dir(err)
          }
        }
      })
    },
    // 找回密码 -> 发送验证码
    codeFn (data) {
      this.dialogPwdVisible = true
      this.backFrom = { ...this.backFrom, ...data }
    }
  }
}
</script>

<style lang="less" scoped>
#login-container {
  position: relative;
  height: 100%;
  background: url('../../assets/bg.png') repeat-x center;
  background-size: 1400px;
  background-color: lightsteelblue;

  #login-box {
    position: absolute;
    top: 32%;
    right: 10%;
    padding: 2% 2% 1% 1%;
    width: 25%;
    min-width: 260px;
    max-width: 350px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 5%;
    text-align: center;

    .el-form {
      position: relative;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }

    .back {
      padding-bottom: 15px;
      text-align: right;
    }
  }
}
</style>
